import styles from './index.module.scss'
import Image from '@c/image'
import Link from 'next/link'
import cm from 'classnames'
import { useWindowWidth } from '@/utils/hooks'

const Index = props => {
  const { data, top = 24 } = props
  const { count } = useWindowWidth()
  return (
    <div className={cm(styles.list, styles.listPhone)} style={{ marginTop: top }}>
      <Link href="/live" className={styles.title}>
        <h2 className={styles.tag}>电视直播</h2>
        <div className={styles.more}>更多电视直播{'>>'}</div>
      </Link>
      <div className={cm('items', styles.items, 'scrollBeautify')}>
        {data.map((item, index) => {
          return (
            <Link
              href={`/live/${item.url}`}
              key={index}
              className={cm('itemLive', styles.item, index + 1 > count * 2 ? 'hide' : '')}
            >
              <Image initSrc="/images/horizon.png" errorSrc="/images/horizon" alt={item.name} src={item.img} />
            </Link>
          )
        })}
      </div>
    </div>
  )
}

export default Index
